import React, { Component } from 'react';
import axios from 'axios';
class View extends Component {
    /**
        挂载
        constructor
    */
    constructor(props){
        // 初始化 state 及邦定事件实例
        super(props);
        this.state = {
            title:'',
            skuid:'60',
            posts:{
                "link":"",
                "jump_url":""
            }
        }
        console.log('constructor')
    }
    async getApi(url,cfg,headers){
        let	data = await axios.get(url,{params:cfg},
        {
            headers: headers
        })
        return data;
    }
    getPost(){
        this.getApi('/wp-json/wp/v2/posts',{},{}).then((res)=>{
            this.setState({
                skuid:'59',
                posts:Object.assign(this.state.posts,res.data[0])
            })
        })
    }
    getHome(){
        const cfg = {
            page_number:'2',
            page_size:'10'
        };
        this.getApi('/home/mediareports',cfg,{}).then((res)=>{
            this.setState({
                posts:Object.assign(this.state.posts,res.data.data[0])
            })
            console.log(this.state.posts)
        })
    }
    componentDidMount(){
        // 设置定时器  ajax请求的位置
        this.getPost();
        console.log('DidMount')
        // this.titmer = setTimeout(()=>{
        //     this.setState({
        //         title:'这是st页面'
        //     })
        // },1000)
        // this.titmer2 = setTimeout(()=>{
        //     this.setState({
        //         title:'这是st页面'
        //     })
        // },5000)
    }
    /**
        更新
    */
    componentDidUpdate(prevProps,prevState){
        console.log('DidUpdate')
        console.log(`prevState:${prevState.skuid},props:${this.props.skuid},state:${this.state.skuid},prevProps:${prevProps.skuid}`)
        if (this.state.skuid !== prevProps.skuid) {
            this.getHome();
            this.setState({
                skuid:"60"
            })
        }
        /**
            有什么用，什么时候用。
            因为此周期为组件更新时调用，而不是默认执行。
            所以在一些特殊情况一下，数据发生变化了（意味着需要更新了）
            我们想在在更新的情况下去做一件事或发送一个新的ajax请求
            时才会被使用。
            但需要注意的时这个需要进行判断设置，否则就会一直更新
            比如我们父组件有一个skuid 为60
            当前skuid也为60，当我第一个ajax请求成功后我把skuid设置成
            不是60的数字，在更新组件中判断发现不等了
            就会更新if中的请求。if 执行完成后 要新新恢复skuid 让其相等不在执行当前
            if 里面的语句




        **/
    }
    /**
        * 卸载
        * 清定时器，取消ajax请求
    */
    componentWillUnmount(){
        console.log('WillUnmount')
        clearTimeout(this.titmer)
        clearTimeout(this.titmer2)
    }

    render(){
        // 纯函数
        console.log('render')
        return(
            <div className="life">这是生命周期页面
                {this.state.posts.link}<br/>
                {this.state.posts.jump_url}
            </div>
        )
    }

}

export default View;
